<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三公</title>
    <script type="application/javascript" src="../static/lib/vue.js"></script>
    <script type="application/javascript" src="../static/lib/axios.min.js"></script>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" tppabs="../lib/layui/css/layui.css" media="all">

    <style>
        table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        table {
            width: 100%;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
        }
    </style>
    <script src=""></script>
</head>
<body>

<div id="app-sg">
    <div>
        <h1>房间-信息：{{roomInfo.name}}-{{roomInfo.no}}</h1>
        <h1>回合-信息：{{roomInfo.roundNo}}</h1>
        <button @click="getDataFromServer" style="font-size: 30px">获取数据</button>
        <button @click="calCredit" style="font-size: 30px">计算积分</button>
        <ul>
            <li v-for="player in playerList">
                <div>
                    <div> 用户名称：{{player.user.name}}</div>
                    <div v-if="player.isHead">
                        是否坐庄：庄家

                    </div>
                    <div v-else>
                        是否坐庄：闲家
                    </div>

                    <div>
                        卡牌：
                        <ul>
                            <li v-for="card in player.cardList" style="float:left;">
                                <img style="width: 150px;height: 180px;"
                                     :src="`http://localhost:8080/sangong/img/getPic?path=puke&picName=${card.cardEnum.picUrl}`">
                            </li>


                        </ul>
                    </div>
                    <hr/>
                    <div>
                        当前点数：
                        {{player.scoreEnum.name}}
                    </div>
                    <div>
                        当前倍数：
                        {{player.scoreEnum.multiple}}倍
                    </div>
                    <div style="color: red;font-size: 20px">
                        当前积分：
                        {{player.score}}
                    </div>
                </div>

                <hr style="size: 5px"/>
            </li>
        </ul>
        <div><h1>每局明细</h1>
            <ul>
                <li v-for="playDetail in playDetailList">

                    <div>
                        <table>
                            <thead>回合编号：{{playDetail.roundNo}}</thead>
                            <tbody>
                            <tr>
                                <th>
                                    姓名
                                </th>
                                <th>
                                    是否做庄
                                </th>

                                <th>
                                    点数
                                </th>
                                <th>
                                    所压的筹码
                                </th>
                                <th>
                                    本轮获得积分
                                </th>
                                <th>
                                    当前积分

                                </th>
                                <th>
                                    最终积分
                                </th>
                            </tr>
                            <tr v-for="playRecord in playDetail.userPlayRecordList">
                                <td>{{playRecord.userName}}
                                <td v-if="playRecord.isHead">
                                    是
                                </td>
                                <td v-else>
                                    否
                                </td>


                                <td>{{playRecord.score.name}}</td>
                                <td>{{playRecord.chip}}</td>
                                <td>{{playRecord.roundGetCredit}}</td>
                                <td>{{playRecord.currentCredit}}</td>
                                <td>{{playRecord.afterCredit}}</td>

                            </tr>
                            </tbody>
                        </table>
                    </div>

                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script>


    var apps = new Vue({
        el: "#app-sg",
        methods: {

            getDataFromServer: function () {
                var that = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/sangong/room/info',
                    data: {
                        roomNo: that.roomInfo.no,
                        userId: "11",
                    },
                    responseType: 'json'
                }).then(function (response) {
                    if (!response.data.success) {
                        if("CARD_OVER"==response.data.errorMsg){
                            alert("牌不够了，确认后将会进行洗牌!");
                            that.washCard();
                        }else{
                            alert(response.data.errorMsg);
                        }


                        return;
                    }
                    var data = response.data.data;
                    console.log(response.data)
                    that.playerList = data.playerList;
                    that.roomInfo = {"name": data.roomName, "no": data.roomNo, "roundNo": data.roundNo}
                }, function (error) {
                    console.log(error)
                });
            },
            calCredit: function () {
                var that = this;
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/sangong/room/calCredit',
                    data: {
                        roomNo: that.roomInfo.no,
                        roundNo: that.roomInfo.roundNo
                    },
                    responseType: 'json'
                }).then(function (response) {
                    if (!response.data.success) {
                        alert(response.data.errorMsg);
                        return;
                    }
                    var data = response.data.data;
                    let scoreMap = data.reduce((acc, item) => {
                        acc.set(item.user.id, item.score);
                        return acc;
                    }, new Map());
                    console.log(scoreMap);
                    for (let i = 0; i < that.playerList.length; i++) {
                        that.playerList[i].score = scoreMap.get(that.playerList[i].user.id);
                    }
                    that.playDetailListFunction();

                }, function (error) {
                    console.log(error)
                });
            }, playDetailListFunction: function () {
                {
                    var that = this;
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/sangong/room/getPlayRecord',
                        data: {
                            roomNo: that.roomInfo.no/*,
                            roundNo: that.roomInfo.roundNo*/
                        },
                        responseType: 'json'
                    }).then(function (response) {
                        if (!response.data.success) {
                            alert(response.data.errorMsg);
                            return;
                        }
                        that.playDetailList = response.data.data;


                    }, function (error) {
                        console.log(error)
                    });
                }
            },washCard : function () {
                {
                    var that = this;
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/sangong/room/washCard',
                        data: {
                            roomNo: that.roomInfo.no
                        },
                        responseType: 'json'
                    }).then(function (response) {
                        if (!response.data.success) {
                            alert(response.data.errorMsg);
                            return;
                        }


                    }, function (error) {
                        console.log(error)
                    });
                }
            }
        },
        data: {
            playerList: [],
            roomInfo: {},
            playDetailList: []


        }
    });
</script>
</html>